<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title><%= htmlWebpackPlugin.options.title %></title>
    
</head>
<body onload="load()">
  <div id="x-report-demo" style="width:1000px;height:800px;border:1px solid red;margin:0 auto;"></div>
  <script>
    window.defaultSheet = {"name":"sheet2","freeze":"A1","styles":[{"align":"center","border":{"bottom":["thin","#000"],"top":["thin","#000"],"left":["thin","#000"],"right":["thin","#000"]},"bgcolor":"#e7e5e6"},{"align":"center","border":{"bottom":["thin","#000"],"top":["thin","#000"],"left":["thin","#000"],"right":["thin","#000"]},"bgcolor":"#e7e5e6"},{"align":"center","border":{"bottom":["thin","#000"],"top":["thin","#000"],"left":["thin","#000"],"right":["thin","#000"]},"bgcolor":"#e7e5e6"},{"align":"center","border":{"bottom":["thin","#000"],"top":["thin","#000"],"left":["thin","#000"],"right":["thin","#000"]},"bgcolor":"#e7e5e6"},{"align":"center","border":{"bottom":["thin","#000"],"top":["thin","#000"],"left":["thin","#000"],"right":["thin","#000"]},"bgcolor":"#e7e5e6"},{"align":"center","bgcolor":"#e7e5e6"},{"align":"center","bgcolor":"#e7e5e6"},{"align":"center","border":{"bottom":["thin","#000"],"top":["thin","#000"],"left":["thin","#000"],"right":["thin","#000"]},"bgcolor":"#e7e5e6"},{"align":"center","bgcolor":"#e7e5e6"},{"align":"center","border":{"bottom":["thin","#000"],"top":["thin","#000"],"left":["thin","#000"],"right":["thin","#000"]},"bgcolor":"#e7e5e6"},{"align":"center","bgcolor":"#e7e5e6"},{"align":"center","bgcolor":"#e7e5e6"},{"align":"center","border":{"bottom":["thin","#000"],"top":["thin","#000"],"left":["thin","#000"],"right":["thin","#000"]}},{"align":"center","border":{"bottom":["thin","#000"],"top":["thin","#000"],"left":["thin","#000"],"right":["thin","#000"]}},{"align":"center","border":{"bottom":["thin","#000"],"top":["thin","#000"],"left":["thin","#000"],"right":["thin","#000"]}},{"align":"center","border":{"bottom":["thin","#000"],"top":["thin","#000"],"left":["thin","#000"],"right":["thin","#000"]}},{"align":"center","border":{"bottom":["thin","#000"],"top":["thin","#000"],"left":["thin","#000"],"right":["thin","#000"]}},{"align":"center"},{"align":"center","border":{"bottom":["thin","#000"],"top":["thin","#000"],"left":["thin","#000"],"right":["thin","#000"]}},{"align":"center","border":{"bottom":["thin","#000"],"top":["thin","#000"],"left":["thin","#000"],"right":["thin","#000"]}},{"align":"center","border":{"bottom":["thin","#000"],"top":["thin","#000"],"left":["thin","#000"],"right":["thin","#000"]}},{"align":"center","border":{"bottom":["thin","#000"],"top":["thin","#000"],"left":["thin","#000"],"right":["thin","#000"]}},{"align":"center","border":{"bottom":["thin","#000"],"top":["thin","#000"],"left":["thin","#000"],"right":["thin","#000"]}},{"align":"center","border":{"bottom":["thin","#000"],"top":["thin","#000"],"left":["thin","#000"],"right":["thin","#000"]}},{}],"merges":["A1:A2","B1:B2","C1:C2","D1:D2","E1:F2","E3:F3","H3:J4"],"rows":{"0":{"cells":{"0":{"merge":[1,0],"text":"序号","style":0},"1":{"merge":[1,0],"text":"名称","style":1},"2":{"merge":[1,0],"text":"年龄","style":2},"3":{"merge":[1,0],"text":"月收入","style":3},"4":{"merge":[1,1],"text":"简述","style":4},"5":{"style":5},"7":{"text":"序号","style":18,"group":[3,2]},"8":{"listMark":true,"style":19},"9":{"text":"收入","style":20}}},"1":{"cells":{"0":{"style":6},"1":{"style":7},"2":{"style":8},"3":{"style":9},"4":{"style":10},"5":{"style":11},"7":{"text":"姓名","style":21},"8":{"bindFiled":"table001.name","text":"=人员列表.名称","style":22},"9":{"bindFiled":"table001.income","text":"=人员列表.收入","style":23}}},"2":{"cells":{"0":{"listMark":true,"style":12,"dataCondition":{"list":[{"type":"dataDb","code":"age","table":"table001","value":"77","op":"==","join":"and"}],"style":{"color":"","hide":false,"background":"#fe0000"}}},"1":{"bindFiled":"table001.name","text":"=人员列表.名称","style":13},"2":{"bindFiled":"table001.age","text":"=人员列表.年龄","style":14},"3":{"bindFiled":"table001.income","text":"=人员列表.收入","style":15},"4":{"merge":[0,1],"text":"=CONCAT(B3,\"今年\",C3,\"岁，月收入\",D3,\"元\")","style":16,"dataCondition":{"list":[{"type":"dataDb","code":"income","table":"table001","value":"1000","op":">=","join":"and"}],"style":{"color":"","hide":false,"background":"#ffc001"}}},"5":{"style":17,"dataCondition":{"list":[{"type":"dataDb","code":"income","table":"table001","value":"1000","op":">=","join":"and"}],"style":{"color":"","hide":false,"background":"#ffc001"}}},"7":{"merge":[1,2],"style":24}}},"3":{"cells":{}},"len":100},"cols":{"4":{"width":232},"5":{"width":84},"len":26},"validations":[],"autofilter":{},"dataDb":[{"label":"人员列表","value":"table001","codes":[{"label":"名称","value":"name"},{"label":"年龄","value":"age"},{"label":"收入","value":"income"},{"label":"状态","value":"state"}]}],"dataFilter":[{"table":"table001","code":"age","value":"76","op":">=","join":"and"}],"groups":["H1:J4"]};
  </script>
  <script>
    var demoList = [
      {name: '张三001',age:'18',income:'1050',state:'ok'},
      {name: '张三002',age:'25',income:'1000',state:'ok'},
      {name: '张三003',age:'56',income:'1010',state:'ok'},
      {name: '张三004',age:'78',income:'1100',state:'ok'},
      {name: '张三005',age:'45',income:'1200',state:'ok'},
      {name: '张三006',age:'32',income:'1300',state:'ok'},
      {name: '张三007',age:'24',income:'1305',state:'ok'},
      {name: '张三008',age:'35',income:'1350',state:'ok'},
      {name: '张三009',age:'60',income:'1400',state:'ok'},
      {name: '张三010',age:'77',income:'800',state:'ok'},
      {name: '张三001',age:'22',income:'500',state:'ok'},
      {name: '张三012',age:'10',income:'450',state:'ok'},
      {name: '张三013',age:'16',income:'4500',state:'ok'},
      {name: '张三014',age:'18',income:'600',state:'ok'},
      {name: '张三015',age:'26',income:'700',state:'ok'},
      {name: '张三016',age:'29',income:'850',state:'ok'},
      {name: '张三017',age:'33',income:'690',state:'ok'},
      {name: '张三018',age:'45',income:'480',state:'ok'},
      {name: '张三019',age:'66',income:'370',state:'ok'},
      {name: '张三020',age:'63',income:'888',state:'ok'},
    ];
    let newList = [];
    for(let i = 0; i < 10;i++){
      newList = newList.concat(demoList);
    }
    var dataSource = {
      table001: newList
    }
    function load(){
      let sheetDemo = window.localStorage.getItem('sheetDemo');
      var xs = window.xreport('#x-report-demo');
      //加载数据
      xs.loadData(sheetDemo?{...JSON.parse(sheetDemo)[0],dataSource}:{...window.defaultSheet,dataSource})
      //监听事件
      xs.on('change',(cdata) => {
        console.log('>>>', xs.getData());
      }).on('cell-selected', (cell, ri, ci) => {
        console.log('cell:', cell, ', ri:', ri, ', ci:', ci);
      }).on('toolbar-click-before',(type,value)=>{
        //头部按钮拦截；执行reject就不会触发更改操作
        console.log('%c头部按钮拦截；执行reject就不会触发更改操作',"color:red;font-size:20px")
        if(type != 'save')return true;
        return new Promise((resolve)=>{
          setTimeout(()=>{
            let nowData = xs.getData();
            window.localStorage.setItem('sheetDemo',JSON.stringify(nowData))
            resolve()
          },10)
        })
      });
      //挂在到window上
      window.$xs = xs;
    }
  </script>
</body>
</html>
